<template>
    <nav>
        <ul>
            <router-link to="/film" tag="li" active-class="on">
                <i class="iconfont icon-dianyingpiaoiocn"></i>
                <span>电影</span>
            </router-link>
             <router-link to="/cinema" tag="li" active-class="on">
                <i class="iconfont icon-yingyuan"></i>
                <span>影院</span>
            </router-link>
             <router-link to="/consult" tag="li" active-class="on">
                <i class="iconfont icon-zixunliuyan"></i>
                <span>咨询</span>
            </router-link>
             <router-link to="/about" tag="li" active-class="on">
                <i class="iconfont icon-wode"></i>
                <span>我的</span>
            </router-link>
        </ul>
    </nav>
</template>

<style lang="scss" scoped>
    nav {
        z-index: 9999;
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 50px;
        background: white;
        border-top: 1px solid #ccc;
        ul {
            display: flex;
            margin-top: 5px;
            li {
                flex:1;
                display: flex;
                flex-direction: column;
                text-align: center;
                i{
                    font-size: 20px;
                }
            }
        }
    }
    .on {
        color: chocolate;
    }
</style>
